<template>
	<div class="role">
		<div class="search">
			<pageSearch :searchFormConfig="searchFormConfig"></pageSearch>
		</div>
		<div class="content">
			<pageContent
				:contentTableConfig="contentTableConfig"
				pageName="role"
				@newBtnClick="handleNewData"
				@editBtnClick="handleEditData"
			></pageContent>
		</div>
		<pageModal
			:modalConfig="modalConfig"
			pageName="role"
			ref="pageModalRef"
			:defaultInfo="defaultInfo"
			:otherInfo="otherInfo"
		>
			<div class="menu-tree">
				<el-tree
          ref="elTreeRef"
					:data="menus"
					:props="{ children: 'children', label: 'name' }"
					node-key="id"
					show-checkbox
					@check="handleCheckChange"
				/>
			</div>
		</pageModal>
	</div>
</template>

<script lang="ts">
	import { defineComponent, computed, ref,nextTick } from 'vue'
	import pageSearch from '@/components/page-search/src/page-search.vue'
	import pageContent from '@/components/page-content/src/page-content.vue'
	import pageModal from '@/components/page-modal/src/pageModal.vue'

	import { searchFormConfig } from './config/search.config'
	import { contentTableConfig } from './config/content.config'
	import { modalConfig } from './config/modal.config'

	import { usePageModal } from '@/hooks/use-page-modal'
	import { useStore } from 'vuex'
  import { getMenuLeafKeys } from '@/utils/map-menus'
  import { ElTree } from 'element-plus'
	export default defineComponent({
		name: 'role',
		components: {
			pageSearch,
			pageContent,
			pageModal
		},
		setup() {
			const store = useStore()
      const elTreeRef = ref<InstanceType<typeof ElTree>>()
			const menus = computed(() => store.state.entireMenu)
			const otherInfo = ref({})
      const handleCheckChange = (data1:any,data2:any)=>{
        const checkedKeys = data2.checkedKeys
        const halfCheckedKeys = data2.halfCheckedKeys
        console.log(checkedKeys);
        console.log(halfCheckedKeys);
        const menuList = [...checkedKeys,...halfCheckedKeys]
        otherInfo.value = {menuList}
      }

      const editCallBack = (item:any)=>{

        const leafKeys = getMenuLeafKeys(item.menuList)
        nextTick(()=>{
          console.log(item);
          elTreeRef.value?.setCheckedKeys(leafKeys,false)
        })
      }
			const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
				usePageModal(undefined,editCallBack)
			return {
				searchFormConfig,
				contentTableConfig,
				modalConfig,
				pageModalRef,
				defaultInfo,
				handleNewData,
				handleEditData,
				menus,
				otherInfo,
        handleCheckChange,
        elTreeRef
			}
		}
	})
</script>

<style scoped lang="less">
	.content {
		border-top: 20px solid #f5f5f5;
		padding: 20px;
	}
	.menu-tree {
		padding-left: 30px;
	}
</style>
